<template>
  <div>
    <div class="memberCont navMarginTop allBackground" :style="{ height: screenHeightBg }">
      <div class="paintingBox">
        <div class="paintingMain flex-1 scrollable" @scroll="handleScroll">
          <div class="h6">绘画广场</div>
          <div class="paintInput">
            <input type="text" class="paintInput-text" placeholder="请输入关键词搜索" v-model="inputVal" value="" />
          </div>
          <div class="categoryImages">
            <h6>分类：</h6>
            <div class="uls">
              <div :class="['li', index === categoryIndex ? 'active' : '']" v-for="(item, index) in categoryData" :key="index" @click="btnCategory(item,index)">{{ item.text }}</div>
            </div>
          </div>
          <waterfall :imageData="evenList[0].list" ref="container" :columnCount="columnCount" :waterType="waterType">
          </waterfall>
        </div>
        <!-- <div class="btnMoreLoading copy" v-if="bomCrl && !empty" @click="clickLoadMore">点击加载更多</div> -->
        <!-- <div class="btnMoreLoading" v-if="!bomCrl && empty">
            正在加载中
            <div class="loading"></div>
          </div> -->
        <div v-if="bomCrl && !empty" class="btnMoreLoading" style="color: #ccc">
          <span>下拉加载更多哟~ </span>
        </div>
        <div v-if="empty" class="btnMoreLoading" style="color: #ccc">
          <span
            >没有更多了
            <div class="loading" v-if="!bomCrl && empty"></div
          ></span>
        </div>
      </div>
    </div>
    <global-footer />
  </div>
</template>
  
<script>
import { getFileAccessHttpUrl, getAction } from '@/api/manage'
import GlobalFooter from '@/components/page/GlobalFooter'

import Waterfall from './component/Waterfall'
export default {
  name: 'PaintingSquare',
  mixins: [],
  components: {
    GlobalFooter,
    Waterfall,
  },
  data() {
    return {
      categoryData: [],
      waterType: 'square',
      columnCount: 5,
      imageSize: '1024x1024',
      zhiLiaSize: 'standard',
      zhiLiaSize1: 'vivid',
      screenWidth: '',
      screenHeight: '',
      screenHeightBg: '',
      newList: [
        { role: 'user', list: [{}] },
        { role: 'assistant', list: [{}] },
      ],
      copyData: [],
      inputVal: '',
      pageNo: 1,
      pageSize: 20,
      bomCrl: true,
      empty: false,
      categoryIndex:0,
      categoryId:'',
    }
  },

  watch: {
    // 被侦听的变量count
    inputVal() {
      this.paintingGall()
      this.pageNo = 1
    },
  },
  computed: {
    evenList: function () {
      let list = this.copyData
      this.newList[0].list = list
      var array = this.newList
      console.log('array', array)
      return array
    },
  },
  mounted() {
    this.paintingGall()
    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.columnCount = this.screenWidth <= 767 ? 2 : 5
      this.screenHeightBg = this.screenHeight - 120 + 'px'
    })
    this.queryZhi()
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    btnCategory(item,index){
      console.log("index",index)
      this.categoryIndex = index
      this.categoryId = item.value
      this.pageNo = 1
      this.sendMessage()
    },
    //字典
    queryZhi() {
      getAction(`/sys/dict/getDictItems/painting_square`, {}).then((res) => {
        this.categoryData = res.result
        this.categoryData.unshift({text:'全部',value:''})
      })
    },
    handleScroll() {
      const container = document.querySelector('.scrollable')
      const { scrollTop, scrollHeight, clientHeight } = container
      // console.log("scrollTop",scrollTop)
      // console.log("clientHeight",clientHeight)
      // console.log("scrollHeight",scrollHeight)
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        // console.log('滚动到底部了！')
        if (this.empty && this.bomCrl) {
        } else {
          this.clickLoadMore()
        }
      }
    },
    clickLoadMore() {
      this.bomCrl = false
      this.pageNo++
      this.sendMessage()
    },
    //查询
    sendMessage() {
      if (this.inputVal.trim() !== '') {
        this.paintingGall('1')
      } else {
        this.paintingGall('2')
      }
    },
    //复制
    copyText(data) {
      const text = data // 要复制的文本内容
      const el = document.createElement('textarea')
      el.value = text
      document.body.appendChild(el)
      el.select()
      document.execCommand('copy')
      document.body.removeChild(el)
      this.$message.success('文本已复制')
    },

    getAvatar(img) {
      console.log('getFileAccessHttpUrl(this.avatar())', getFileAccessHttpUrl(img))
      return getFileAccessHttpUrl(img)
    },
    //选项卡下标
    paintingGall(type) {
      let obj = {
        prompt: this.inputVal,
        n: 1,
        size: '',
        quality: '',
        style: '',
        categoryId:this.categoryId,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      this.empty = true
      getAction('/paintingsquare/api/listAll', obj)
        .then((res) => {
          console.log('res', res)
          this.$refs.container.goSetIerVal()
          if (res.result.length !== 0) {
            if (this.pageNo !== 1) {
              this.bomCrl = true
              this.empty = false
              this.copyData = this.copyData.concat(res.result.records)
              if (res.result.records.length === 0) {
                this.empty = true
                this.bomCrl = true
              }
            } else {
              this.bomCrl = true
              this.empty = false
              this.copyData = res.result.records
            }

            // this.evenList()
          }

          // this.$refs.modalForm2.getListGroupBy(this.listData2,'role')
        })
        .catch((error) => {
          console.log('error', error)
          // 处理请求失败
        })
    },
  },
}
</script>
  
  <style lang="less" scoped >
.paintingBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  .h6 {
    background: linear-gradient(90deg, #00abff, #0b85ff);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    background-clip: text;
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    -o-text-fill-color: transparent;
    text-fill-color: transparent;
    font-size: 30px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .ul {
    margin-left: -5px;
    margin-right: -5px;
    column-gap: 0;
    column-count: 5;
    .li {
      overflow: hidden;
      border-radius: 20px;
      margin: 5px;
      img {
        width: 100%;
        float: left;
        // margin-bottom: 8px;
        cursor: pointer;
        transition: all 0.3s;
      }
      margin-bottom: 5px;
      display: inline;
      position: relative;
      float: left;
    }
  }
  .categoryImages {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    h6 {
      font-size: 18px;
      margin-bottom: 0;
    }
    .uls {
      .li {
        border-radius: 30px;
        box-shadow: 0 2px 6px #dedfe4;
        cursor: pointer;
        font-size: 18px;
        font-weight: 500;
        height: 40px;
        line-height: 40px;
        margin-right: 10px;
        overflow: hidden;
        padding: 0 24px;
        text-align: center;
        float: left;
        &.active{
          background: linear-gradient(90deg, #938bff, #ff97f2);
          color: white;
        }
      }
    }
  }
}

.loading {
  width: 22px;
  height: 22px;
  border: 2px solid #1890ff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 0.75s linear infinite;
  float: right;
  margin-left: 4px;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.btnMoreLoading {
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  &.copy {
    background: linear-gradient(90deg, #938bff, #ff97f2);
    padding: 10px 0;
    border-radius: 30px;
    width: 300px;
    margin: 10px auto 0;
  }
}

.memberCont,
/deep/.ant-layout-content {
  background: linear-gradient(to right, rgb(230, 247, 255), #fff, rgb(230, 247, 255));
}

.paintInput {
  display: flex;
  justify-content: center;
  .paintInput-text {
    border: none;
    background: #f8f8f8;
    padding: 13px 10px 13px 20px;
    width: 100%;
    box-shadow: inset 0 0 0 1px #dcdfe6;
    border-radius: 30px;
    width: 600px;
    margin-bottom: 20px;
  }
}
.box {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
  width: 100%;
  .item {
    margin: 10px;
    width: calc(100% / 5 - 20px);
    img {
      width: 100%;
      height: 100%;
    }
  }
}

@media screen and (max-width: 767px) {
  .paintingBox {
    .h6 {
      font-size: 20px;
      margin-bottom: 8px;
    }
    .paintInput {
      .paintInput-text {
        padding: 10px 10px 10px 20px;
      }
    }
  }
  .paintInput {
    .paintInput-text {
      width: 90%;
    }
  }

  .btnMoreLoading {
    &.copy {
      width: 100%;
      padding: 7px 0;
    }
  }

  .paintingBox .categoryImages{
    margin-bottom: 0;
    .uls .li{
    margin-bottom: 10px;
  }
  } 
}
</style>
  